<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login/Register</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css" />
</head>

<body>
    <div id="web_bg" style="background-image: url(./../images/loginbg.jpg);">
        <div id="main">
            <div id="card1">
                <div id="c1login"><button onclick="cardlogin()">Login</button></div>
                <div id="c1register"><button onclick="cardregister()">Register</button></div>
                <div id="c1mp"><button onclick="window.location.href='../index.html'">Main</button></div>
            </div>
        </div>

    <script>
        var main = document.getElementById("main");
        function cardmain() {
            setTimeout("changec1()", 750);
            setTimeout("re()", 750);
            main.style.transform = "rotateY(90deg)";
        }
        function cardlogin() {
            setTimeout("changec2()", 750);
            setTimeout("re()", 750);
            main.style.transform = "rotateY(90deg)";
        }
        function cardregister() {
            setTimeout("changec3()", 750);
            setTimeout("re()", 750);
            main.style.transform = "rotateY(90deg)";
        }
        function changec1() {
            document.getElementById('main').innerHTML =''
            +'<div id="card1">'
                +'<div id="c1login">'
                    +'<button onclick="cardlogin()">login</button>'
                +'</div>'
                +'<div id="c1register">'
                    +'<button onclick="cardregister()">Register</button>'
                +'</div>'
                +'<div id="c1mp">'
                    +`<button onclick="window.location.href='../index.html'">Main</button>`
                +'</div>'
            +'</div>';
        }
        function changec2() {
            document.getElementById('main').innerHTML = ''
            +'<div id="card2">'
                +'<div id="c21">'
                    +'<img src="../images/user_icon_copy.png">'
                    +'<input type="text" name="useid" placeholder="Username" />'
                +'</div>'
                +'<div id="c22">'
                    +'<img src="../images/lock_icon_copy.png">'
                    +'<input type="password" name="pw" placeholder="Password">'
                +'</div> '
                +'<div id="c23">'
                    +'<button type="submit">Login</button>'
                    +'<div id="c24">'
                        +'<button onclick="cardmain()">Return</button>'
                    +'</div>'
                    +'<div id="c23mp">'
                        +`<button onclick="window.location.href='../index.html'">Main</button>`
                    +'</div>'
                +'</div>'
                
            +'</div>';
        }
        function changec3() {
            document.getElementById('main').innerHTML = ''
            +'<div id="card3">'
                +'<div id="c31"> '
                    +'<img src="../images/user_icon_copy.png">'
                    +'<input type="text" name="useid" placeholder="Username" />'
                +'</div>'
                +' <div id="c32">'
                    +'<img src="../images/lock_icon_copy.png">'
                    +' <input type="password" name="pw" placeholder="Password">'
                +'</div>'
                +'<div id="c33">'
                    +'<img src="../images/lock_icon_copy.png">'
                    +'<input type="password" name="pw" placeholder="Confirm Password">'
                +'</div>'
                +'<div id="c34">'
                    +'<button type="submit">Register</button>'
                    +'<div id="c35">'
                        +'<button onclick="cardmain()">Return</button>'
                    +'</div>'
                    +'<div id="c23mp">'
                        +`<button onclick="window.location.href='../index.html'">Main</button>`
                    +'</div>'
                +'</div>'
            +'</div>';
        }
        function re() {
            main.style.transform = "rotateY(0deg)";
        }
    </script>
</body>

</html>